<template>
  <!-- 选择文件夹对话框 -->
  <el-dialog
    title="选择文件夹"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @open="handleDialogOpen"
    @close="handleDialogClose"
  >
    <div class="el-dialog-div">
      <!-- 选择的目标路径 -->
      <div class="target-path">
        <span class="label">目标路径：</span>
        <el-input class="content" v-model="targetPath" readonly size="small"></el-input>
      </div>
      <!-- 文件目录树 -->
      <el-tree
        :data="fileTree"
        :props="{
          children: 'children',
          label: 'label',
        }"
        :highlight-current="true"
        :expand-on-click-node="true"
        :default-expanded-keys="defaultExpandedKeys"
        node-key="id"
        v-loading="loading"
        @node-click="handleNodeClick"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="label">{{ node.label }}</span>
          <el-button
            type="text"
            class="add-folder-btn"
            size="mini"
            @click.stop="handleAddFolderBtnClick(data)"
          >
            新建
          </el-button>
        </span>
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleDialogClose" size="mini">取 消</el-button>
      <el-button
        type="primary"
        :loading="sureBtnLoading"
        @click="handleDialogSure"
        size="mini"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getFoldTree } from "_r/file.js"; // 假设这是获取文件夹树的接口

export default {
  name: "FolderSelectDialog",
  props: {
    openVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false, // 对话框是否可见
      targetPath: "", // 选择的目标路径
      fileTree: [], // 文件目录树数据
      loading: false, // 加载状态
      sureBtnLoading: false, // 确定按钮加载状态
      defaultExpandedKeys: [], // 默认展开的节点
    };
  },
  watch: {
    openVisible(newVal) {
      this.visible = newVal;
    },
  },
  methods: {
    /**
     * 对话框打开的回调
     */
    async handleDialogOpen() {
      // 初始化文件目录树数据
      this.loading = true;
      try {
        const res = await getFoldTree();
        if (res.success) {
          this.fileTree = [res.data];
          this.defaultExpandedKeys = [this.fileTree[0].id];
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        this.$message.error("获取文件夹树失败");
      } finally {
        this.loading = false;
      }
    },
    /**
     * 对话框关闭的回调
     */
    handleDialogClose() {
      this.visible = false;
      this.targetPath = "";
      this.$emit("dialog-close", false);
    },
    /**
     * 节点点击事件
     * @param {object} data 节点数据
     */
    handleNodeClick(data) {
      this.targetPath = data.filePath; // 假设节点数据中有 filePath 属性表示路径
    },
    /**
     * 新建文件夹按钮点击事件
     * @param {object} data 节点数据
     */
    async handleAddFolderBtnClick(data) {
      console.log(data, "handleAddFolderBtnClick");
      // 调用新建文件夹服务，并在弹窗确认回调事件中刷新文件夹树
      this.$openDialog
        .addFolder({
          filePath: data.filePath || "/",
        })
        .then(() => {
          this.handleDialogOpen(); // 刷新文件夹树
        });
    },
    /**
     * 确定按钮点击事件
     */
    handleDialogSure() {
      this.sureBtnLoading = true;
      // 这里可以触发回调将选择的路径传递出去
      this.$emit("folder-selected", this.targetPath);
      this.handleDialogClose();
      this.sureBtnLoading = false;
    },
  },
};
</script>

<style lang="stylus" scoped>
/* 样式 */
.custom-tree-node
  height:80px;
  line-height:80px;

.add-folder-btn
  margin-left:50px;
  v-deep .el-tree-node__content
    height 34px !important;
</style>
